<template>
  <div>
    <el-card class="box-card">
      <!-- <div v-for="o in 4"
           :key="o"
           class="text item">
        {{'列表内容 ' + o }}
      </div> -->
      <div class="equity">
        <span class="title">一级权益</span>
        <div class="text">
          <el-row :gutter="20">
            <el-col :span="8">
              <span>可上架商品数量:</span>
              <el-input size="small"
                        v-model="value1"></el-input>个
              <el-input size="small"
                        v-model="value2"></el-input>元/年
            </el-col>
            <el-col :span="2">
              <el-divider direction="vertical"></el-divider>
            </el-col>
            <el-col :span="8">
              <span>优惠价:</span>
              <el-input size="small"
                        v-model="value3"></el-input>元/年
            </el-col>
          </el-row>

        </div>
      </div>
      <div class="equity">
        <span class="title">二级权益</span>
        <div class="text">
          <el-row :gutter="20">
            <el-col :span="8">
              <span>可上架商品数量:</span>
              <el-input v-model="value4"></el-input>个
              <el-input v-model="value5"></el-input>元/年
            </el-col>
            <el-col :span="2">
              <el-divider direction="vertical"></el-divider>
            </el-col>
            <el-col :span="8">
              <span>优惠价:</span>
              <el-input v-model="value6"></el-input>元/年
            </el-col>
          </el-row>

        </div>
      </div>
      <div class="equity">
        <span class="title">三级权益</span>
        <div class="text">
          <el-row :gutter="20">
            <el-col :span="8">
              <span>可上架商品数量:</span>
              <el-input v-model="value7"></el-input>个
              <el-input v-model="value8"></el-input>元/年
            </el-col>
            <el-col :span="2">
              <el-divider direction="vertical"></el-divider>
            </el-col>
            <el-col :span="8">
              <span>优惠价:</span>
              <el-input v-model="value9"></el-input>元/年
            </el-col>
          </el-row>

        </div>
      </div>
      <el-button type="primary"
                 @click="save">保存</el-button>
    </el-card>

  </div>
</template>

<script>
export default {
  name: '',

  components: {},

  props: {},

  data () {
    return {
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5: '',
      value6: '',
      value7: '',
      value8: '',
      value9: ''
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {
    save () {
      this.$message.success('保存成功')
    }
  }
}
</script>

<style scoped lang="less">
.equity {
  border: 1px solid #d3d3d3;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 20px;
  .text {
    span {
      margin-left: 30px;
    }
    .el-input {
      margin-left: 10px;
      margin-right: 10px;
      width: 80px;
    }
    .el-divider {
      height: 40px;
      text-align: center;
    }
  }
}
</style>
